<template>
    <div>
        <!-- 这是商品列表下方的产品展示组件 -->
        <ul>
            <li v-for="item in goodsList" :id="item.id" :key="item.id" @click="toDetialFn(item.id)">
                <img :src="item.list_pic_url" alt="">
                <p>{{item.name}}</p>
                <h3>￥<span>{{item.retail_price}}</span>元</h3>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {

        };
    },
    props:['goodsList'],
    methods:{
        toDetialFn(id){
            // this.$router.push(`/productDecital?id=${id}`)
            this.$router.push({path:'/productDecital',query:id})
            localStorage.setItem('goodsId',id)
        }
    }


}

</script>
<style scoped>
ul{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
}
ul li{
    width: 50%;
    /* height:3.45rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
li img{
    width: 176px;
    height: 176px;
}
li p{
    font-size: 16px;
}
li h3{
    font-weight: normal;
    color: #8b0031;
    font-size: 16px;
}
</style>